﻿@using Logistics.Web.Models.Order
@using Nop.Core.Domain.Customers
@{
    ViewBag.Title = "Shipping Service";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var customer = WorkContext.CurrentCustomer;
}

<div class="logistics-order row">
    <div class="logistics-order-content-wrapper col-xs-12 col-md-9">
        <div class="logistics-order-loading">
            <img class="loading-svg"src="/Content/images/loading.svg" />
            <img class="loading-gif" src="/Content/images/loading.gif" /><br />
            <span class="logistics-order-loading-message">@T("Common.Loading")</span>
        </div>
        <div class="logistics-order-packages"></div>
        <div class="logistics-order-messages"></div>
        <div class="logistics-order-content">
            @RenderBody()
        </div>
    </div>
    <div class="logistics-order-subtotal-wrapper col-xs-12 col-md-3">
        <div class="logistics-order-subtotal"></div>
        <div class="logistics-order-subtotal-loading">
            <img class="loading-svg" src="/Content/images/loading.svg" />
            <img class="loading-gif" src="/Content/images/loading.gif" /><br />
            <span class="logistics-order-loading-message">@T("Common.Loading")</span>
        </div>
        
    </div>
    <div class="back-to-top">
        <a href="#backtop"><i class="fa fa-angle-up"></i></a>
    </div>
    <div class="clear"></div>
</div>
<div class="modal fade" id="order-tip" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<script>
    $(".back-to-top").click(function (e) {
        e.preventDefault();
        $("body,html").animate({ scrollTop: 0 }, 500);
    });
    var ordertipPopover = false;
    $(".order-tip").live("click", function () {
        if ($("#" + $(this).attr("data-target")).length) {
            if ($(window).width() > 768) {
                $(this).next(".popover-message").popover({
                    title: $("#" + $(this).attr("data-target")).find(".title").html(),
                    content: $("#" + $(this).attr("data-target")).find(".content").html(),
                    html: true,
                    trigger: "focus"
                }).popover("show");
                setTimeout(function () {
                    ordertipPopover = true;
                }, 50);
            } else {
                $("#order-tip .modal-title, #order-tip .modal-body").empty();
                $("#order-tip .modal-title").html($("#" + $(this).attr("data-target")).find(".title").html());
                $("#order-tip .modal-body").html($("#" + $(this).attr("data-target")).find(".content").html());
                $("#order-tip").modal("show");
            }
        }
    });
    $(".popover-message").live("mouseout", function () {
        $(".popover-message").popover('destroy');
        ordertipPopover = false;
    });
    $(document).click(function () {
        if (ordertipPopover == true) {
            ordertipPopover = false;
            $(".popover-message").popover('destroy');
        }
    });
</script>